<template>
  <div class="app-container">
    <div class="cy_list">
      <div class="cy_xq">
        <h3>成员列表——成员详情</h3>
      </div>
      <div class="cy_tab">
        <span class="cy_tx">
          <img />
        </span>
        <span class="cy_taspa">
          <table class="cy_table">
            <tr>
              <td>允兒電競萌妹</td>
              <td>ID:4544555</td>
              <td>总收入</td>
              <td>22元</td>
            </tr>
            <tr>
              <td>23 &nbsp;长沙市</td>
              <td></td>
              <td>陪玩订单收入</td>
              <td>22元</td>
            </tr>
            <tr>
              <td>加入公会时间：</td>
              <td>2019-10-10</td>
              <td>礼物收入</td>
              <td>34元</td>
            </tr>
            <tr>
              <td>最后上线时间：</td>
              <td>2019-10-10 13:00</td>
              <td>活跃值</td>
              <td>86</td>
            </tr>
          </table>
        </span>
      </div>
    </div>
    <div class="cy_game">
      <span class="ga_list7">
        <div class="img_tu"></div>
        <h3>英雄联盟</h3>
        <p>
          <span class="red_36">36</span>N币/局
        </p>
        <div class="fonts12">
          <span class="duanwei">钻石星耀</span>
          <span>接单数：10</span>
          <div>总收入：360&nbsp;N币</div>
        </div>
        <div class="fonts12">最近接单时间：2019-11-20 13:00</div>
        <span class="icon_tubiao"></span>
      </span>

      <span class="ga_list7">
        <div class="img_tu"></div>
        <h3>英雄联盟</h3>
        <p>
          <span class="red_36">36</span>N币/局
        </p>
        <div class="fonts12">
          <span class="duanwei">钻石星耀</span>
          <span>接单数：10</span>
          <div>总收入：360&nbsp;N币</div>
        </div>
        <div class="fonts12">最近接单时间：2019-11-20 13:00</div>
        <span class="icon_tubiao"></span>
      </span>

      <span class="ga_list7">
        <div class="img_tu"></div>
        <h3>英雄联盟</h3>
        <p>
          <span class="red_36">36</span>N币/局
        </p>
        <div class="fonts12">
          <span class="duanwei">钻石星耀</span>
          <span>接单数：10</span>
          <div>总收入：360&nbsp;N币</div>
        </div>
        <div class="fonts12">最近接单时间：2019-11-20 13:00</div>
        <span class="icon_tubiao"></span>
      </span>

      <span class="ga_list7">
        <div class="img_tu"></div>
        <h3>英雄联盟</h3>
        <p>
          <span class="red_36">36</span>N币/局
        </p>
        <div class="fonts12">
          <span class="duanwei">钻石星耀</span>
          <span>接单数：10</span>
          <div>总收入：360&nbsp;N币</div>
        </div>
        <div class="fonts12">最近接单时间：2019-11-20 13:00</div>
        <span class="icon_tubiao"></span>
      </span>

      <span class="ga_list7">
        <div class="img_tu"></div>
        <h3>英雄联盟</h3>
        <p>
          <span class="red_36">36</span>N币/局
        </p>
        <div class="fonts12">
          <span class="duanwei">钻石星耀</span>
          <span>接单数：10</span>
          <div>总收入：360&nbsp;N币</div>
        </div>
        <div class="fonts12">最近接单时间：2019-11-20 13:00</div>
        <span class="icon_tubiao"></span>
      </span>

      <span class="ga_list7">
        <div class="img_tu"></div>
        <h3>英雄联盟</h3>
        <p>
          <span class="red_36">36</span>N币/局
        </p>
        <div class="fonts12">
          <span class="duanwei">钻石星耀</span>
          <span>接单数：10</span>
          <div>总收入：360&nbsp;N币</div>
        </div>
        <div class="fonts12">最近接单时间：2019-11-20 13:00</div>
        <span class="icon_tubiao"></span>
      </span>



    </div>
    <div class="cy_dd">
      <div class="dingd">订单</div>
      <div class="hezi">
      <div class="dd_select">
        <div>
          <el-row>
            时间：
            <el-button size="mini" type="info" round>全部</el-button>
            <el-button size="mini" round>已完成</el-button>
            <el-button size="mini" round>已取消</el-button>
            <el-button size="mini" round>已退款</el-button>
            <el-button size="mini" round>待付款</el-button>
            <el-button size="mini" round>待接单</el-button>
            <el-button size="mini" round>服务中</el-button>
            <el-button size="mini" round>售后中</el-button>
          </el-row>
        </div>

        <br>
        <div>
          <el-form size="mini" :inline="true">
            <el-row class="ztrow">
              状态：
              <el-button size="mini" type="info" round>全部</el-button>
              <el-button size="mini" round>近一年</el-button>
              <el-button size="mini" round>近一月</el-button>
              <el-button size="mini" round>近一周</el-button>
              <el-button size="mini" round>今日</el-button>
              <el-button size="mini" round>自选日期</el-button>
            </el-row>

            <el-form-item prop="begintime" class="input_cozt1" label>
              <el-date-picker
                class="input_szt"
                v-model="formInline.begintime"
                type="datetime"
                placeholder
                value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </el-form-item>
            <el-form-item prop="endtime" class="input_co1zt1" label="——">
              <el-date-picker
                class="input_szt"
                v-model="formInline.endtime"
                type="datetime"
                placeholder
                value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </el-form-item>
            <!-- <el-button size="mini" @click="query()" icon="el-icon-search">查询</el-button> -->
          </el-form>
        </div>
        <br />
        <br>
<div></div>
        <div>
            <span class="xiadandan">下单：</span>

          <el-select class="xdsele" v-model="value" placeholder="ID">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-input class="xiadan_inp" v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <br>
        <div>金额：
             <el-input class="jine_inp1" v-model="input" placeholder="请输入内容"></el-input>—— <el-input class="jine_inp2" v-model="input" placeholder="请输入内容"></el-input>
        </div>
      </div>
      <div class="cy_table133">
        <table class="cy_table33">
          <tr>
            <td>订单号</td>
            <td>陪玩师</td>
            <td>下单人</td>
            <td>陪玩项目</td>
            <td>单价（N币）</td>
            <td>数量</td>
            <td>应付金额</td>
            <td>实付金额</td>
            <td>订单状态</td>
            <td>时间</td>
          </tr>
          <tr>
            <td>1223333</td>
            <td>NN娜娜ID:34434343</td>
            <td>薄荷ID:2333443</td>
            <td>王者荣耀</td>
            <td>25</td>
            <td>2</td>
            <td>50</td>
            <td>50</td>
            <td>已完成</td>
            <td>2019-10-1013:00</td>
          </tr>
        </table>
      </div>
      </div>
      <div class="pages_cy">
        <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
      </div>
      <div class="pldc"><el-button type="primary">批量导出</el-button></div>

    </div>
    <div class="cy_pie">
      <span class="pie_tutu"></span>
      <span class="cy_pie_table">
        <el-table :data="tableData" style="width: 360px" class="perpie_flo perpie_flo2">
          <el-table-column prop="date" label="用户" width="80"></el-table-column>
          <el-table-column prop="name" label="总消费" width="80"></el-table-column>
          <el-table-column prop="address" label="总占比" width="80"></el-table-column>
          <el-table-column prop="name" label="订单消费" width="80"></el-table-column>
          <el-table-column prop="address" label="订单占比" width="80"></el-table-column>
        </el-table>
      </span>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { getInfoAPI, deleteAPI } from "@/api/user";
import {
  getRecommendhall,
  deleteRecommendhall,
  putawayRecommendhall,
  editRecommendhall
} from "@/api/teamhall";
import RoomEdit from "./components/RoomEdit";
export default {
  // 角色管理
  name: "RoomRecommendSystem",
  components: {
    RoomEdit
  },
  data() {
    return {
      activeName: "first",
      showList: true,
      showRole: false,
      formInline: {
        pagenum: 10,
        page: 1,
        hallid: "1"
      },
      total: 0,
      dialog: {
        status: false,
        type: "",
        model: null
      },
      loading: false,
      tableData: []
    };
  },
  computed: {
    ...mapGetters(["img_base_url"])
  },
  methods: {
    // 打开新增页面
    openAdd() {
      this.dialog.status = true;
      this.dialog.type = "add";
      this.dialog.model = null;
    },
    // 打开编辑页面
    openEdit(obj) {
      this.dialog.status = true;
      this.dialog.type = "edit";
      this.dialog.model = obj;
    },
    // 删除
    deleteUser(obj) {
      this.$confirm("是否删除该房间推荐位，删除后无法恢复", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const params = {
            id: obj.id
          };
          deleteRecommendhall(params).then(res => {
            if (res.code === 0) {
              this.getBannerList();
            }
          });
        })
        .catch(() => {
          // todo
        });
    },
    // 上架
    putaway(obj) {
      console.log(obj);
      this.$confirm("是否上架该房间推荐位，上架后其他推荐位将下架", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const params = {
            id: obj.id
          };
          putawayRecommendhall(params).then(res => {
            if (res.code === 0) {
              this.getBannerList();
            }
          });
        })
        .catch(() => {
          // todo
        });
    },
    // 下架
    remove(obj) {
      this.$confirm(
        "是否下架该房间推荐位，下架后将无可用房间推荐位置，请谨慎操作",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          const params = {
            id: obj.id,
            statustype: "1"
          };
          editRecommendhall(params).then(res => {
            if (res.code === 0) {
              this.getBannerList();
            }
          });
        })
        .catch(() => {
          // todo
        });
    },
    // 操作成功更新列表
    success() {
      this.getBannerList();
    },
    close() {
      this.dialog.status = false;
      this.dialog.type = "";
    },
    handleSizeChange(val) {
      console.log(val);
      this.formInline.page = 1;
      this.formInline.pagenum = val;
      this.getBannerList();
    },
    // pageNum 发生改变触发
    handleCurrentChange(val) {
      this.formInline.page = val;
      this.getBannerList();
    },
    getBannerList() {
      this.loading = true;
      getRecommendhall(this.formInline).then(res => {
        this.loading = false;
        console.log(res.data);
        this.tableData = res.data.list;
        this.total = res.data.total;
      });
    }
  },
  mounted() {
    this.getBannerList();
  }
};
</script>
<style>
.cy_tab {
    padding: -10px;
    position: relative;
    width: 900px;
    height: 212px;
    margin-top: 40px;
}
span.cy_tx {
    width: 200px;
    height: 200px;
    background: gray;
    display: inline-block;
    border-radius: 50%;
    /* margin-left: 10px; */
    margin-top: 45px;
    position: absolute;
    top: -56px;
}
span.cy_taspa {
    display: inline-block;
    margin-left: 235px;
    margin-top: 14px;
    /* width: 507px; */
}
table.cy_table {
    width: 572px;
    height: 163px;
}
span.ga_list7 {
    display: inline-block;
    width: 155px;
    height: 264px;
    border: 2px solid lightgrey;
    text-align: center;
    margin-left: 28px;
    margin-top: 30px;
    border-radius: 20px;
}
.img_tu {
    width: 60px;
    height: 60px;
    background: gray;
    margin: 0 auto;
    margin-top: 20px;
}
span.red_36 {
    color: red;
    font-size: 18px;
}
span.duanwei {
    font-size: 12px;
    color: purple;
}
.fonts12 {
    font-size: 12px;
}
.cy_dd {
    margin-top: 44px;
}
.dingd {
    width: 60px;
    height: 32px;
    padding: 10px;
    border: 2px solid lightgray;
    border-bottom: none;
    border-radius: 9px;
    text-align: center;
    margin-left: 161px;
}
.hezi {
    width: 902px;
    height: 343px;
    border: 1px solid lightgray;
    padding: 20px;
    border-radius: 10px;
    margin-left: 128px;
}
.el-date-editor.input_szt.el-input.el-input--mini.el-input--prefix.el-input--suffix.el-date-editor--datetime {
    width: 55px;
    margin-left: 20px;
}
.ztrow.el-row {
    float: left;
}
.el-form-item.input_cozt1.el-form-item--mini {
    float: left;
    /* width: 284px; */
}
.el-form-item.input_co1zt1.el-form-item--mini {
    float: left;
}
.xiadan_inp.el-input {
    width: 191px;
    margin-left: 10px;
    height: -45px;
}
.el-input--suffix .el-input__inner {
    padding-right: 30px;
    width: 82px;
    height: 33px;
}
span.xiadandan {
    display: inline-block;
    width: 80px;
    height: 20px;
    margin-left: -732px;
}
.jine_inp2.el-input {
    width: 110px;
}
.jine_inp1.el-input {
    width: 110px;
}
table.cy_table33 {
    font-size: 12px;
    width: 859px;
    height: 69px;
    margin-top: 24px;
    text-align: center;
}
.cy_table133 {
    margin-left: -17px;
    width: 891px;
    border-top: 1px solid lightgrey;
    margin-top: 18px;
}
.pages_cy {
    MARGIN-LEFT: 631PX;
    MARGIN-TOP: 10PX;
}
.pldc {
    margin-left: 916px;
    margin-top: -374px;
    position: absolute;
}
.pages_cy {
    position: relative;
}
span.pie_tutu {
    display: inline-block;
    width: 200px;
    height: 200px;
    background: palevioletred;
    margin-left: 251px;
    margin-top: 51px;
}
span.cy_pie_table {
    display: inline-block;
    margin-left: 69px;
    /* width: 396px; */
}
</style>
